<template>
	<el-dialog width="60%" visible :show-close="false" :append-to-body="true" class="wrap" size="small">
		<i class="el-icon-close close" @click="cancel" style="color: white;"></i>
		<div class="bt">加入现有补课</div>
		<el-form label-width="100px" class="form">
			<!-- <el-button type="primary" @click='componentsShow("add",params)'  >+</el-button> -->
			<el-table :data="dataList" stripe border align="left" class="admin-table">
				<div slot='empty'>
					<img src="../../../assets/img/empty.png" style="width:40px;vertical-align: middle;">
					<span style="vertical-align: middle;">暂时还没有内容哦!</span>
				</div>
				<el-table-column :prop="v.prop" :label="v.label" v-for="(v,index) in portTitleList" align="center" show-overflow-tooltip v-if="v.hide != 0" :formatter="v.formatter" :align="v.align || 'center'" :fixed="v.fixed" :class-name="v.columnStyle" :width="v.width" :min-width="v.minWidth" :header-align="v.headerAlign || 'center'">
					<template scope="scope">
						<div slot="reference">
							{{ scope.row[scope.column.property] }}
						</div>
					</template>
				</el-table-column>
				<!-- <el-table-column label="操作" width="160" align="center"> -->
				<el-table-column align="center" label="操作" width="200px">
					<template scope="scope">
						<el-button size="small" type="primary" @click="tjbcbk(scope.row.id)">加入本次补课</el-button>
						<el-button size="small" type="primary" @click="componentsShow('edit',scope)">修改</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-form>
		<el-dialog title="选择课程" width="500px" :visible.sync="dialogFormVisible" :append-to-body="true">
			<el-form label-width="100px">
				<el-form-item label="课程名称">
					<el-select v-model="vkcid" placeholder="请选择课程" @change="getdaylist()" class="select-block1">
						<el-option :label="v.mc" :value="v.id+''" v-for="v in xzkclist"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="Day">
					<el-select v-model="vdayid" placeholder="请选择Day" class="select-block1">
						<el-option :label="v.day1" :value="v.day2+''" v-for="v in daylist"></el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="tjbcbk1()">确 定</el-button>
			</div>
		</el-dialog>
		<AddComponent v-if="portComponents.add.toggle" @close="componentsHide" :params="portComponents.add.params"></AddComponent>
		<EditComponent v-if="portComponents.edit.toggle" @close="componentsHide" :params="portComponents.edit.params"></EditComponent>
		<TjbkComponent v-if="portComponents.tjbk.toggle" @close="componentsHide" :params="portComponents.tjbk.params"></TjbkComponent>
	</el-dialog>
</template>
<script type="text/javascript">
	import qs from 'qs'
	import AddComponent from './add'
	import EditComponent from './edit'
	import TjbkComponent from './tjbk'
	export default {
		props: ['params'],
		components: {
			AddComponent,
			EditComponent,
			TjbkComponent
		},
		data() {
			return {
				dialogFormVisible: false,
				xzkclist: [],
				daylist: [],
				vkcid: '',
				vdayid: '',
				id: '',
				xg: true,
				dataList: [],
				xslist: [],
				isLoading: true, //动画加载
				searchLoading: false, //搜索按钮触发按钮动画
				/*分页属性设置*/
				layout: 'total, sizes, prev, pager, next, jumper', //组件布局
				pageindex: this.$store.state.pageindex, //当前分页页码
				pagesizes: this.$store.state.pagesizes, //显示个数的选择器选项
				pagesize: this.$store.state.pagesize, //每页显示条目数
				total: 0, //总条数
				portComponents: {
					/* 添加 */
					add: {
						type: 'add',
						toggle: false,
						params: '',
						data: {}
					},
					/* 编辑 */
					edit: {
						type: 'edit',
						toggle: false,
						params: '',
						data: {}
					},
					tjbk: {
						type: 'tjbk',
						toggle: false,
						params: '',
						data: {}
					},
				},
				portTitleList: [{
						prop: 'id',
						label: 'id',
						hide: 0,
						align: 'center',
						fixed: false,
						width: '',
						minWidth: '',
						headerAlign: 'center',
						formatter: function(row, column) {}
					},
					{
						prop: 'lsmc',
						label: '补课老师',
						hide: 1,
						align: 'center',
						fixed: false,
						width: '',
						minWidth: '',
						headerAlign: 'center',
						formatter: function(row, column) {}
					},
					{
						prop: 'bksj',
						label: '补课时间',
						hide: 1,
						align: 'center',
						fixed: false,
						width: '',
						minWidth: '100',
						headerAlign: 'center',
						formatter: function(row, column) {}
					},
					{
						prop: 'xs',
						label: '补课学生',
						hide: 1,
						align: 'center',
						fixed: false,
						width: '',
						minWidth: '100',
						headerAlign: 'center',
						formatter: function(row, column) {}
					},
				],
			}
		},
		created() {
			console.log(this.params, 'hhhhhhhhhhh')
			this.getxzkclist();
			this.loadinfo()
		},
		methods: {
			getxzkclist() {
				var logininfo = JSON.parse(localStorage.logininfo);
				this.searchLoading = true;
				var params2 = qs.stringify({
					yhid: logininfo.id,
					xxid: logininfo.xxid
				})
				//执行
				this.axios.post(this.$store.state.api + 'kcfl/getfllist', params2)
					.then(res => {
						this.xzkclist = res.data.data.list;
					}).catch(res => {})
			},
			getdaylist() {
				var logininfo = JSON.parse(localStorage.logininfo);
				this.searchLoading = true;
				var params2 = qs.stringify({
					kcflid: this.vkcid,
					yhid: logininfo.id,
					xxid: logininfo.xxid
				})
				//执行
				this.axios.post(this.$store.state.api + 'xsbkap/getday', params2)
					.then(res => {
						console.log(res, 'dayyy')
						this.daylist = res.data.data.list;
					}).catch(res => {})
			},
			getxslist(id) {
				var logininfo = JSON.parse(localStorage.logininfo);
				this.axios.get(this.$store.state.api + 'xsbkap/list1', {
					params: {
						bkapid: id,
						xxid: logininfo.xxid
					}
				}).then(res => {
					let data = res.data.data;
					let list = data.list;
					this.xslist = list;
				}).catch(res => {
					// this.searchLoading = false;
				})
			},
			tjbcbk(id) {
				this.bkapid = id
				if(this.params.row.lx == 'sf') {
					this.dialogFormVisible = true
				} else {
					this.tjbcbk2()
				}
			},
			tjbcbk1() {
				if(!this.vkcid){
					this.$message.error("请选择课程!")
					return
				}
				if(!this.vdayid){
					this.$message.error("请选择Day!")
					return
				}
				var logininfo = JSON.parse(localStorage.logininfo);
				this.axios.get(this.$store.state.api + 'xsbkap/insert', {
					params: {
						bkapid: this.bkapid + '',
						day: this.vdayid,
						kqjlid: '',
						kcflid:this.vkcid,
						bjid: this.params.row.bjid + '',
						lx: this.params.row.lx + '',
						kslx: this.params.row.kslx,
						xsid: this.params.row.xsid + '',
						xxid: logininfo.xxid + '',
					}
				}).then(res => {
					this.loadinfo()
					this.$emit('close', {
						type: 'add',
						cancel: true
					});
					this.$router.push('/educa/lsbkap')
				}).catch(res => {
					this.$message.error("服务器异常!")
				})

			},
			tjbcbk2() {
				this.$confirm('确定加入本次补课?', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
				}).then(() => {
					var day = ""
					var kqjlid = ""
					var kslx=""
					console.log(this.params.row)
					if(this.params.row.day) {
						day = this.params.row.day + ''
						kqjlid = this.params.row.kqid + ''
					} 
					if(this.params.row.kslx) {
						kslx=this.params.row.kslx
						kqjlid = this.params.row.id + ''
						if(this.params.row.kslx='暂无参加任何考试'){
							kslx=''
						}
					} 
					var logininfo = JSON.parse(localStorage.logininfo);
					this.axios.get(this.$store.state.api + 'xsbkap/insert', {
						params: {
							bkapid: this.bkapid + '',
							day: day,
							kqjlid: kqjlid,
							bjid: this.params.row.bjid + '',
							lx: this.params.row.lx + '',
							kslx: kslx,
							xsid: this.params.row.xsid + '',
							xxid: logininfo.xxid + '',
						}
					}).then(res => {
						this.loadinfo()
						this.$emit('close', {
							type: 'add',
							cancel: true
						});
						this.$router.push('/educa/lsbkap')
					}).catch(res => {
						this.$message.error("服务器异常!")
					})

				}).catch(() => {});	
			},
			loadinfo() {
				var logininfo = JSON.parse(localStorage.logininfo);
				this.axios.get(this.$store.state.api + 'bkap/list2', {
					params: {
						xxid: logininfo.xxid,
						yhid: logininfo.id,
					}
				}).then(res => {
					this.dataList = res.data.data.list
				}).catch(res => {
					this.$message.error("服务器异常!");
					this.$emit('close', {
						type: 'add',
						cancel: true
					});
				})
			},
			handleSizeChange(val) { //每页显示条数触发事件
				this.pagesize = val;
				this.pageindex = 1;
				this.loadinfo();
			},
			handleCurrentChange(val) { //分页触发事件
				this.loadinfo();
			},
			edit() {
				this.xg = false;
			},
			add() {
				this.xg = true;
				this.$store.state.loading = true;
				var logininfo = JSON.parse(localStorage.logininfo);
				var params2 = qs.stringify({
					id: this.form.id + '',
					mc: this.form.mc + '',
					yhid: logininfo.id + '',
					xxid: logininfo.xxid + ''
				})
				//执行
				this.axios.post(this.$store.state.api + 'bj/update', params2)
					.then(res => {
						if(res.data.code == 1) {
							this.$emit('close', {
								type: 'add',
								cancel: false
							});
							this.$message.success(res.data.msg);
							this.$store.state.loading = false;
						} else {
							this.$message.warning(res.data.msg);
							this.$store.state.loading = false;
						}
					}).catch(res => {
						this.$message.error("服务器异常");
						this.$store.state.loading = false;
					})
			},
			cancel() {
				this.$emit('close', {
					type: 'add',
					cancel: true
				})
			},
			componentsShow(type, data, list) { //显示组件
				for(let i in this.portComponents) {
					if(type == this.portComponents[i].type) {
						this.portComponents[i].toggle = true;
						this.portComponents[i].params = data;
						if(this.portComponents[i].data.type == 'single') {
							this.portComponents[i].data.index = data.row.id
						} else if(this.portComponents[i].data.type == 'multiple') {
							this.portComponents[i].data.index = this.multipleDelNum;
						} else {
							return;
						}
						return;
					}
				}
			},
			componentsHide(setting) { //关闭组件
				for(let i in this.portComponents) {
					if(setting.type == this.portComponents[i].type) {
						this.portComponents[i].toggle = false;
						if(!setting.cancel) {
							this.loadinfo();
						}
						return;
					}
				}
			}
		}
	}
</script>
<style lang="less" scoped>
	.wrap {
		text-align: center;
	}
	
	.bt {
		position: absolute;
		width: 100%;
		height: 50px;
		margin: 0 auto;
		top: 0;
		background: #50BFFF;
		left: 0;
		color: white;
		text-align: left;
		line-height: 50px;
		font-size: 17px;
		padding-left: 15px;
	}
	
	.close {
		z-index: 10;
		position: absolute;
	}
	
	.form {
		text-align: left;
		margin-top: 10px;
	}
	
	.input {
		width: 300px;
		display: inline-block;
	}
	
	.space-between {
		padding: 10px 0;
		display: block;
	}
	
	.select-block {
		width: 85%;
		display: block;
	}
	
	.submit {
		width: 100px;
		height: 40px;
		font-size: 40px;
		border-radius: 25px;
		text-align: center;
		line-height: 1px;
	}
	
	.gn {
		width: 100%;
		height: 100%;
		float: left;
	}
	
	.aa {
		width: 70%;
	}
	
	.anniu1 {
		display: flex;
		justify-content: space-around;
		flex-flow: wrap;
		float: left;
	}
	
	.top {
		width: 20%;
		height: 80px;
		float: left;
		border-radius: 8px;
		margin-right: 15px;
		margin-top: 10px;
		margin-bottom: 20px;
		background: white;
		position: relative;
		box-shadow: 7px 7px 7px #B3B3B3;
		border-radius: 8px;
	}
	
	.tp {
		width: 100%;
		height: 100px;
		float: left;
		border-radius: 8px;
		background: white;
		position: relative;
		box-shadow: 7px 7px 7px #B3B3B3;
		border-radius: 8px;
	}
	
	.htsz {
		display: flex;
		justify-content: space-around;
		flex-flow: wrap;
		width: 100%;
		height: 100%;
		margin: 0 auto;
		margin-bottom: 25px;
		float: left;
		/*margin-top: 52px;*/
		/*		margin-bottom: 10px;*/
		color: white;
		text-align: center;
		font-size: 16px;
		/*		background: white;*/
		/*		border-top: 3px solid deepskyblue;*/
	}
</style>